<template>
  <el-col class="info-wrapper" ::span="23">
    <el-form
      ref="form"
      :model="searchParams"
      class="search-from main-content"
      label-width="120px"
    >
      <el-col class="search-col">
        <el-form-item label="委托人" prop="client">
          <el-input v-model="searchParams.client"></el-input>
        </el-form-item>
        <el-form-item label="生产者" prop="producer">
          <el-input v-model="searchParams.producer"></el-input>
        </el-form-item>
        <el-form-item label="生产企业" prop="produceCompany">
          <el-input v-model="searchParams.produceCompany"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="合同编号" prop="contractId">
          <el-input v-model="searchParams.contractId"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-select
            v-model="searchParams.province"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书状态" prop="certificateStatus">
          <el-select
            v-model="searchParams.certificateStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in certificateStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="证书编号" prop="certificateId">
          <el-input v-model="searchParams.certificateId"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="certificateCategory">
          <el-select
            v-model="searchParams.certificateCategory"
            placeholder="请选择"
          >
            <el-option
              v-for="item in certificateCategoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="发证日期" prop="certificateStartTime">
          <el-date-picker
            v-model="searchParams.certificateStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="certificateEndTime">
          <el-date-picker
            v-model="searchParams.certificateEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到期时间" prop="expireStartTime">
          <el-date-picker
            v-model="searchParams.expireStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="expireEndTime">
          <el-date-picker
            v-model="searchParams.expireEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="初次发证日期" prop="firstStartTime">
          <el-date-picker
            v-model="searchParams.firstStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="firstEndTime">
          <el-date-picker
            v-model="searchParams.firstEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="产品类型" prop="productType">
          <el-input v-model="searchParams.productType"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="searchParams.remarks"></el-input>
        </el-form-item>
        <el-form-item label="工厂编号" prop="companyId">
          <el-input v-model="searchParams.companyId"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="search-col operation-area">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">清空</el-button>
        <el-button @click="batchExport">批量导出</el-button>
        <div style="margin-left: 20px;">生产企业数量：{{10}}</div>
      </el-col>
    </el-form>

    <el-tabs class="table-tabs" type="border-card">
      <el-tab-pane>
        <span slot="label">证书数量 {{ certificateListTableData.length }}</span>
        <el-table border :data="certificateListTableData">
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="状态"> </el-table-column>
          <el-table-column prop="date" label="初次发证日期"> </el-table-column>
          <el-table-column prop="date" label="发证日期"> </el-table-column>
          <el-table-column prop="date" label="暂停时间"> </el-table-column>
          <el-table-column prop="date" label="暂停到期"> </el-table-column>
          <el-table-column prop="date" label="撤销时间"> </el-table-column>
          <el-table-column prop="date" label="恢复时间"> </el-table-column>
          <el-table-column prop="date" label="型号"> </el-table-column>
          <el-table-column prop="date" label="备注"> </el-table-column>
          <el-table-column prop="operation" label="操作" width="100px">
            <el-link type="primary" style="margin-right: 8px" @click="toDetail">详情</el-link>
            <el-link type="primary" @click="deleteRow">删除</el-link>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: "certificateChange",
  data() {
    return {
      defulatParams: {
        client: "", // 委托人
        producer: "", // 生产者
        produceCompany: "", // 生产企业
        contractId: "", // 合同编号
        province: "", // 省份
        certificateStatus: "", // 证书状态
        certificateId: "", // 证书编号
        certificateCategory: "", // 类型
        certificateStartTime: "", // 发证日期
        certificateEndTime: "", // 至（发证日期）
        expireStartTime: "", // 到期时间
        expireEndTime: "", // 至（到期时间）
        firstStartTime: "", // 初次发证日期
        firstEndTime: "", // 至（初次发证日期）
        productType: "", // 产品类型
        remarks: "", // 备注
        companyId: "" // 工厂编号
      },
      searchParams: {
        ...this.defulatParams,
      },
      certificateListTableData: [{ date: 123 }], // 表格数据
      provinceList: [], // 省份列表数据
      certificateStatusList: [], // 证书状态列表数据
      certificateCategoryList: [], // 类型列表数据
    };
  },
  mounted() {
    this.queryTableData();
  },
  methods: {
    search() {
      // todo: 搜索方法
    },
    reset() {
      this.searchParams = {
        ...this.defulatParams
      };
      this.search();
    },
    batchExport() {
      // todo: 批量导出方法
    },
    queryTableData() {
      // todo：获取表格数据
    },
    toDetail(row) {
      this.$router.push({
        path: "/product/changeMange/system/detail",
        query: row
      });
    }
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .search-from {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2d9e6;
    padding-top: 20px;

    .search-col {
      display: flex;
    }

    .operation-area {
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }

  .table-tabs {
    margin-top: 15px;
  }

  .operation-col {
    white-space: 5px;
  }
}
</style>
